<!-- 饼图进度条 -->
<template>
  <div
    ref="chartRef"
    :style="{
      width: props.width + '%',
      height: props.height + '%',
    }"
  ></div>
</template>
<script setup>
import { onMounted } from "vue";
// import { useEcharts } from "../../../../hook/ useEcharts";
import * as echarts from "echarts";
import { useEcharts } from "../../hook/ useEcharts";

const { chartRef, initChart, updateChart } = useEcharts();

const props = defineProps({
  width: {
    type: Number,
    default: 100,
  },
  height: {
    type: Number,
    default: 100,
  },
  data: {
    type: String,
    default: '0%',
  }
});

// 定义 Echarts 配置选项
const option = {
  backgroundColor: "transparent",
  graphic: {
    elements: [
      {
        type: "text",
        left: "center", // 水平居中
        top: "40%", // 垂直位置与饼图中心对齐
        style: {
          text: props.data,
          textAlign: "center",
          fill: "#fff",
          font: "bolder 10px Microsoft YaHei",
        },
      },
    ],
  },
  series: [
    {
      type: "pie",
      radius: ["50%", "40%"], // 设置环形饼图的内外半径
      center: ["50%", "45%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 90,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#01F1FE",
              },
              {
                offset: 1,
                color: "#008BFF",
              },
            ]),
            borderColor: "transparent", // 标准符合的颜色
          },
        },
        {
          value: 10,
          itemStyle: {
            opacity: 0,
          },
        },
      ],
    },
  ],
};

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  updateChart(newOption);
};

onMounted(() => {
  // 初始化图表
  initChart(option);
});
// 可以在适当的时候调用 updateData 函数来更新图表
</script>
